<template>
  <div style="margin: 20px 20px">
    <el-row :gutter="20" type="flex" class="row-bg" justify="center">
      <el-col :span="12">
        <div
          class="grid-content bg-purple ub column-top"
          style="
            background: #00c0ef;
            color: #fff;
            height: 120px;
            border-radius: 5px;
          "
        >
          <div
            class="ub-f1"
            style="font-size: 38px; font-weight: bold; padding: 20px"
          >
            50
          </div>
          <div
            class=""
            style="background: #3399FF;height:30px;text-align:'center"
          >
            总数人
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div
          class="grid-content bg-purple ub column-top"
          style="
            background: #00c0ef;
            color: #fff;
            height: 120px;
            border-radius: 5px;
          "
        >
          <div
            class="ub-f1"
            style="font-size: 38px; font-weight: bold; padding: 20px"
          >
            15
          </div>
          <div
            class=""
            style="background: #3399FF;height:30px;text-align:'center"
          >
            休假人数
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      type="flex"
      class="row-bg"
      justify="center"
      style="margin-top: 20px"
    >
      <el-col :span="12">
        <div
          class="grid-content bg-purple ub column-top"
          style="
            background: #00c0ef;
            color: #fff;
            height: 120px;
            border-radius: 5px;
          "
        >
          <div
            class="ub-f1"
            style="font-size: 38px; font-weight: bold; padding: 20px"
          >
            5
          </div>
          <div
            class=""
            style="background: #3399FF;height:30px;text-align:'center"
          >
            外派人数
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div
          class="grid-content bg-purple ub column-top"
          style="
            background: #dd4b39;
            color: #fff;
            height: 120px;
            border-radius: 5px;
          "
        >
          <div
            class="ub-f1"
            style="font-size: 38px; font-weight: bold; padding: 20px"
          >
            30
          </div>
          <div
            class=""
            style="background: rgba(0, 0, 0, 0.1);height:30px;text-align:'center"
          >
            其他
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card class="box-card" style="margin-top:50px;">
      <div slot="header" class="clearfix" style="font-weight:600;">
        <span></span>
      </div>
      <div>
       
      </div>
      <div style="margin-top:15px;"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        userName: "",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
</style>